
//增加图片缩略图
function addImgDiv(imgPath) {
    var container = document.getElementById('container');

    var newchild = document.createElement("div");
    newchild.setAttribute("style", "float:left");
    var img_id = "cy" + String(Math.random());
    newchild.innerHTML = "<img class='pic'  id='" + img_id + "' width='105px' style='margin: 0 3px' height='85px' src='" + "data:image/jpg;base64," + imgPath + "'/>";
    container.appendChild(newchild);
    var img = document.getElementById(img_id);
    img.oncontextmenu = function (e) {
        e.preventDefault();    //阻止默认行为
        my_thumbnail_img_active_remove() // 删除自身
        let img_id = this.id;            // 缩略图ID
        let img_url = this.src;          // 缩略图src

        // 动态创建两个按钮
        let my_div = document.createElement("div")
        my_div.id = 'my_thumbnail_img_active'
        my_div.style.display = 'inline'
        my_div.style.position = 'absolute'
        my_div.style.top = e.clientY + 'px'
        my_div.style.left = e.clientX + 'px'

        // 预览按钮
        let my_btn1 = document.createElement('button')
        my_btn1.innerText = "预览"
        my_btn1.onclick = function () {
            my_thumbnail_img_active_remove();

            const img = new Image()
            img.src = img_url
            const newWin = window.open('', '_blank')
            newWin.document.write(img.outerHTML)
            newWin.document.title = '图片预览'
            newWin.document.close()
        }

        // 删除按钮
        let my_btn2 = document.createElement('button')
        my_btn2.innerText = "删除"
        my_btn2.onclick = function () {
            my_thumbnail_img_active_remove();
            document.getElementById(img_id).remove();
        }

        my_div.appendChild(my_btn1)
        my_div.appendChild(my_btn2)
        document.getElementById("container").appendChild(my_div);
       
      
     
    };
    img.onclick=function(){
        var _this = $(this);//将当前的pimg元素作为_this传入函数 
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    }
}
// 删除右键缩略图弹出的两个按钮
function my_thumbnail_img_active_remove() {
    let dom_my_thumbnail_img_active = document.getElementById("my_thumbnail_img_active");
    if (dom_my_thumbnail_img_active) {
        dom_my_thumbnail_img_active.remove();
    }
}


function imgShow(outerdiv, innerdiv, bigimg, _this) {
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性 
    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
    $("<img/>").attr("src", src).load(function () {
        var windowW = $(window).width();//获取当前窗口宽度 
        var windowH = $(window).height();//获取当前窗口高度 
        var realWidth = this.width;//获取图片真实宽度 
        var realHeight = this.height;//获取图片真实高度 
        var imgWidth, imgHeight;
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
        if (realHeight > windowH * scale) {//判断图片高度 
            imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放 
            imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度 
            if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度 
                imgWidth = windowW * scale;//再对宽度进行缩放 
            }
        } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度 
            imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放 
            imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度 
        } else {//如果图片真实高度和宽度都符合要求，高宽不变 
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放 
        var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距 
        var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距 
        $(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性 
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg 
    });
    $(outerdiv).click(function () {//再次点击淡出消失弹出层 
        $(this).fadeOut("fast");
    });
}
  // 用于输出日志信息
  function log(msg){
    date = new Date().toTimeString().slice(0, 8);
    var oldVal = $('#log').html();
    $('#log').html(date + ' :\t' + msg + '<br>' + oldVal);
}

